<template>
	<div class="food-calorie-container">
		<!-- 标题部分 -->
		<h1 class="title">食物卡路里查询</h1>
		<p class="subtitle">探索健康饮食，从了解食物卡路里开始</p>

		<!-- 搜索部分 -->
		<div class="search-section">
			<input v-model="foodName" type="text" class="search-input" @focus="onInputFocus" @blur="onInputBlur" />
			<button @click="queryCalorie" class="search-button">查询</button>
		</div>

		<!-- 加载状态 -->
		<div v-if="loading" class="loading-spinner">
			<div class="spinner"></div>
			<p class="loading-text">正在加载...</p>
		</div>

		<!-- 错误信息 -->
		<div v-else-if="errorMsg" class="error-message">
			<i class="fa-solid fa-triangle-exclamation"></i> {{ errorMsg }}
		</div>

		<!-- 无结果提示 -->
		<div v-else-if="foodList.length === 0 && !loading" class="no-results">
			<i class="fa-solid fa-magnifying-glass"></i> 未找到相关食物信息
		</div>

		<!-- 食物列表 -->
		<div v-else class="food-card-list">
			<div v-for="(item, index) in foodList" :key="index" class="food-card"
				:class="{ 'animate-slide-in': showList }">
				<div class="card-content">
					<h3 class="card-food-name">{{ item.name }}</h3>
					<p class="card-food-calorie">{{ item.calorie }} 卡路里/100g</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义响应式变量
	const foodName = ref('');
	const foodList = ref([]);
	const loading = ref(false);
	const errorMsg = ref('');
	const showList = ref(false);

	/**
	 * 查询食物热量
	 */
	const queryCalorie = async () => {
		if (!foodName.value.trim()) {
			errorMsg.value = '请输入有效的食物名称';
			return;
		}

		// 初始化状态
		loading.value = true;
		errorMsg.value = '';
		foodList.value = [];
		showList.value = false;

		try {
			const apiUrl =
				`https://api.istero.com/resource/food/calorie/query?token=e274977be077797db24669c942ab975b&food=${encodeURIComponent(foodName.value)}&page=1`;

			// 使用 uni.request 发起网络请求
			const response = await uni.request({
				url: apiUrl,
				method: 'GET',
			});

			if (response.data.code === 200) {
				foodList.value = response.data.data.lists || [];
			} else {
				errorMsg.value = '查询失败，请稍后重试';
			}
		} catch (error) {
			console.error('Error fetching food calorie data:', error);
			errorMsg.value = '网络请求出错，请检查网络连接';
		} finally {
			loading.value = false;

			// 如果有结果，添加动画效果
			if (foodList.value.length > 0) {
				setTimeout(() => {
					showList.value = true;
				}, 100);
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 全局变量 */
	$primary-color: #2ecc71;
	$error-color: #e74c3c;
	$text-color: #7f8c8d;
	$bg-color-light: #f9f9f9;

	/* 页面容器 */
	.food-calorie-container {
		// background: linear-gradient(145deg, #f4f9f4, #dcedc8);
		background-color: #e8f5e9;
		max-width: 600px;
		margin: 0 auto;
		padding: 30px;
		background-color: #fff;
		border-radius: 30px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		animation: fadeIn 0.5s ease;
	}

	/* 标题 */
	.title {
		text-align: center;
		color: $primary-color;
		font-size: 32px;
		margin-bottom: 10px;
	}

	.subtitle {
		text-align: center;
		color: $text-color;
		font-size: 16px;
		margin-bottom: 30px;
	}

	/* 搜索部分 */
	.search-section {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-bottom: 30px;

		.search-input {
			width: 100%;
			height: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 8px;
			font-size: 30rpx;
			transition: border-color 0.3s ease, box-shadow 0.3s ease;

			&.input-focus {
				border-color: $primary-color;
				box-shadow: 0 0 8px rgba($primary-color, 0.3);
			}
		}

		.search-button {
			width: 80%;
			padding: 12rpx;
			background: linear-gradient(135deg, #2ecc71, #27ae60);
			color: white;
			font-size: 18px;
			font-weight: bold;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			transition: background 0.3s ease, transform 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
	}

	/* 加载状态 */
	.loading-spinner {
		text-align: center;
		margin-top: 30px;

		.spinner {
			border: 4px solid rgba(0, 0, 0, 0.1);
			border-left-color: $primary-color;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			animation: spin 1s linear infinite;
			margin: 0 auto;
		}

		.loading-text {
			font-size: 18px;
			color: $text-color;
			margin-top: 10px;
		}
	}

	/* 错误信息 */
	.error-message {
		color: $error-color;
		text-align: center;
		margin-top: 30px;
		font-size: 16px;
	}

	/* 无结果提示 */
	.no-results {
		color: $text-color;
		text-align: center;
		margin-top: 30px;
		font-size: 16px;
	}

	/* 食物卡片列表 */
	.food-card-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;

		.food-card {
			background-color: $bg-color-light;
			border-radius: 10px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			padding: 20px;
			opacity: 0;
			transform: translateY(20px);
			transition: all 0.3s ease;

			&.animate-slide-in {
				opacity: 1;
				transform: translateY(0);
			}

			.card-content {
				display: flex;
				flex-direction: column;

				.card-food-name {
					font-weight: bold;
					font-size: 20px;
					color: #333;
					margin-bottom: 5px;
				}

				.card-food-calorie {
					font-size: 15px;
					color: $text-color;
				}
			}
		}
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>